<template>
    <div id="error">
        <div class="error-main">
            <span class="error-code">{{error.statusCode.toString().split('')[0]}}</span>
            <span class="error-code">{{error.statusCode.toString().split('')[1]}}</span>
            <span class="error-code">{{error.statusCode.toString().split('')[2]}}</span>
            <div class="error-back">
                <p class="error-msg">{{error.message}}</p>
                <p class="error-msg">很抱歉，页面出错了，请返回首页吧!</p>
                <button class="error-btn" @click="backHome">返回首页</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
	name:'error',
    props:['error'],
    methods:{
		backHome(){
			this.$router.replace('/');
        }
    }
}
</script>
<style scoped>
    #error{
        background-image: linear-gradient(45deg,rgba(0,121,148,.8) 0%,rgba(50,80,30,.5) 100%);
        position: relative;
        width: 100%;
        height: 100vh;
    }
    .error-main{
        width: 60%;
        height: 40vh;
        background-color: gainsboro;
        position: absolute;
        z-index: 2;
        top:0;
        left:0;
        right: 0;
        bottom:0;
        margin: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border-radius: 20px;
        border: 10px solid #E48443;
        border-left-color: #47494e;
        border-right-color: #47494e;
    }
    .error-code{
        position: relative;
        font-weight: bold;
        color:maroon;
        text-shadow: 4px 4px 5px lightseagreen;
        animation: 1.2s bounce ease-in-out infinite;
    }
    .error-code:nth-of-type(2){
        animation-delay: .4s;
    }
    .error-code:nth-of-type(3){
        animation-delay: .8s;
    }
    .error-code::after{
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background-color: #7f828b;
        animation: 1.2s shadow ease-in-out infinite;
    }
    .error-code:nth-of-type(2)::after{
        animation-delay: .4s;
    }
    .error-code:nth-of-type(3)::after{
        animation-delay: .8s;
    }
    .error-back{
        position: absolute;
        bottom:0;
        text-align: center;
    }
    .error-msg{
        font-size: 20px;
        font-style: italic;
        margin-bottom: 10px;
    }
    .error-btn{
        position: relative;
        outline: none;
        border: none;
        line-height: 35px;
        width: 100%;
        margin-bottom: 10px;
        border-radius: 15px;
        transition: .5s;
        background-color: rgba(0,0,0,.7);
        color:#f7f8fb;
        overflow: hidden;
    }
    .error-btn:hover{
        cursor: pointer;
    }
    .error-btn:hover::after{
        content: "";
        position: absolute;
        left: 0;
        height: 80px;
        width: 30px;
        background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%);
        animation: .5s move linear 1 forwards;
    }
    @keyframes move {
        0%{
            transform:translateX(-100px) translateY(-20px) rotateZ(30deg);
        }
        100%{
            transform:translateX(500px) translateY(-20px) rotateZ(30deg);
        }
    }
    @media screen and (min-width: 750px){
        .error-main{
            min-width: 500px;
            max-width: 800px;
        }
        .error-code{
            font-size: 150px;
            height: 180px;
        }
        .error-code::after{
            bottom:-20px;
            width: 100px;
            height: 30px;
        }
        @keyframes bounce {
            0%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-40px);
            }
            100%{
                transform: translateY(0);
            }
        }
        @keyframes shadow {
            0%{
                width: 100%;
                height: 30px;
                bottom:-20px;
            }
            50%{
                width: 20px;
                height: 6px;
                bottom:-60px;
                background-color:#D4D4D4;
            }
            100%{
                width: 100%;
                height: 30px;
                bottom:-20px;
            }
        }
    }
    @media screen and (max-width: 750px){
        .error-main{
            width: 80%;
        }
        .error-code{
            font-size: 80px;
            height: 100px;
        }
        .error-code::after{
            bottom:-20px;
            width: 50px;
            height: 15px;
        }
        .error-back{
            width: 150%;
            transform: scale(.6);
        }
        @keyframes bounce {
            0%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-20px);
            }
            100%{
                transform: translateY(0);
            }
        }
        @keyframes shadow {
            0%{
                width: 50px;
                height: 15px;
                bottom:-10px;
            }
            50%{
                width: 20px;
                height: 3px;
                bottom:-30px;
                background-color:#D4D4D4;
            }
            100%{
                width: 50px;
                height: 15px;
                bottom:-10px;
            }
        }
    }
</style>
